<!doctype html>
<html class="no-js  fixed-layout">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广东穗智 | 后台管理</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="images/logo.ico">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
</head>
<style>
    .desc {
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        bottom: 37px;
        padding: 10px;
        width: 97%;
        color: #fff;
        text-align: center
    }
</style>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<header class="am-topbar admin-header">
    <div class="am-topbar-brand">
        <strong>广东穗智律师事务所</strong>
        <small>后台管理系统</small>
    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-offcanvas="{target: '#admin-offcanvas'}"><span class="am-sr-only">导航切换</span> <span
            class="am-icon-bars"></span>
    </button>


    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
            <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span
                    class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
    </div>
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar am-offcanvas" id="admin-offcanvas" style="overflow-y: hidden">
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <ul class="am-list admin-sidebar-list">
                <li><a href="index.action"><span class="am-icon-home"></span> 首页</a></li>
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span>
                        页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
                    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
                        <li><a href="company.action" class="am-cf"><span class="am-icon-check"></span> 公司概况</a></li>
                        <li><a href="case.action"><span class="am-icon-puzzle-piece"></span> 穗智案例</a></li>
                        <li><a href="team.action"><span class="am-icon-pencil-square-o"></span> 团队介绍</a></li>
                        <li><a href="contact.action"><span class="am-icon-phone"></span> 联系我们</a></li>
                    </ul>
                </li>
                <li><a href="message.action"><span class="am-icon-table"></span> 用户留言<span
                        class="am-badge am-badge-secondary am-margin-right am-fr"></span></a></li>

                <li><a href="../view/admin/logout.action"><span class="am-icon-sign-out"></span> 注销</a></li>
            </ul>

            <div class="am-panel am-panel-default admin-sidebar-panel">
                <div class="am-panel-bd">
                    <p><span class="am-icon-bookmark"></span> 公告</p>
                    <p>广东穗智律师事务所后台管理系统欢迎您</p>
                </div>
            </div>
            <footer>
                <hr>
                <p class="am-padding-left">© 2016 广东穗智律师事务所</p>
            </footer>
        </div>
    </div>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">团队介绍</strong> /
                <small>Team Introduction</small>
            </div>
        </div>
        <hr/>

        <!--删除成功提示弹窗-->
        <div class="am-g">
            <div class="am-modal am-modal-alert" tabindex="-1" id="del-alert">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">删除成功！</div>
                    <div class="am-modal-bd">
                    </div>
                    <div class="am-modal-footer">
                        <span class="am-modal-btn">确定</span>
                    </div>
                </div>
            </div>
        </div>


        <!--选择确认提示弹窗-->
        <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">确定要删除这条记录吗？</div>
                <div class="am-modal-bd">
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                    <span class="am-modal-btn" data-am-modal-confirm data-am-modal="{target:'#del-alert'}"
                          id="del-sure">确定</span>
                </div>
            </div>
        </div>

        <!--修改资料弹窗-->
        <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
            <div class="am-modal-dialog">
                <form class="am-form" id="teamIntroduction" enctype="multipart/form-data">
                    <div class="am-modal-hd"></div>
                    <div>
                        <input type="file" name="pic" style="display: none" id="pic" class="pic" required="required">
                        <img class="am-circle newPic" alt="" width="100" height="100" onclick="loadPic()"/>
                    </div>
                    <div class="am-modal-bd">
                        <input name="id" id="id" hidden>
                        <strong>姓名</strong>
                        <input type="text" class="am-modal-prompt-input name" name="name" id="name">
                        <strong>职称</strong>
                        <input type="text" class="am-modal-prompt-input profession"
                               name="profession" id="profession">
                        <strong>业务专长</strong>
                        <input type="text" class="am-modal-prompt-input expertise" name="expertise"
                               id="expertise">
                        <strong>详细介绍</strong>
                        <textarea class="am-modal-prompt-input content" name="content" rows="5"
                                  id="content"></textarea>
                    </div>
                    <div class="am-modal-footer">
                        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                        <span class="am-modal-btn" data-am-modal-confirm id="upload">提交</span>
                    </div>
                </form>
            </div>
        </div>


        <div class="am-tabs am-margin" data-am-tabs>

            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="#tab1"><span class="am-icon-male"></span> 基本信息</a></li>
                <button type="button" class="am-btn am-btn-primary edit"><span class="am-icon-plus-square"></span> 新增成员
                </button>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">

                    <ul class="am-slides">

                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!-- content end -->

</div>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/jquery.form.min.js"></script>
<script>
    $(document).ready(function () {
        getMember();
    })
    function getMember() {
        ajax("../view/admin/viewMember.action", "", function (data) {
            var addList = "";
            var member = data.member;
            $.each(member, function (index) {
                var item = member[index];
                addList += '<li class="am-u-md-2  am-u-sm-10 am-thumbnail" style="margin:10px 4%;float: left">' +
                        '<img src="../images/' + item.pic + '" style="width: 257px;height: 343px" id="pic_' + item.id + '">' +
                        '<div class="desc" id="name_' + item.id + '">' + item.name + '</div>' +
                        '<div class="am-btn-group am-btn-group-justify" data-id=' + item.id + '>' +
                        '<span style="display: none" id="profesion_' + item.id + '">' + item.profesion + '</span>' +
                        '<span style="display: none" id="expertise_' + item.id + '">' + item.expertise + '</span>' +
                        '<span style="display: none" id="content_' + item.id + '">' + item.content + '</span>' +
                        '<button type="button" class="am-btn am-btn-primary edit">修改</button>' +
                        '<button type="button" class="am-btn am-btn-danger delete">删除</button>' +
                        '</div>' +
                        '</li>';
            })
            $("#tab1").find(".am-slides").html(addList);
        }, function (data) {

        }, "get")
    }


    //获取图片本地路径
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    //成员操作（新增，修改，删除）
    $(function () {

        //修改或新增成员弹窗并提交
        var id;
        $("body").on('click', '.edit', function () {
            id = this;
            if ($(id).parent().attr("data-id") != null || $(id).parent().attr("data-id") != undefined) {
                $("#name").val($('#name_' + $(id).parent().attr("data-id")).text());
                $("#pic").next().attr("src", $('#pic_' + $(id).parent().attr("data-id")).attr("src"));
                $("#profession").val($('#profesion_' + $(id).parent().attr("data-id")).text());
                $("#expertise").val($('#expertise_' + $(id).parent().attr("data-id")).text());
                $("#content").val($('#content_' + $(id).parent().attr("data-id")).text());
                $("#id").val($(id).parent().attr("data-id"));
            } else {
                $("#name").val("");
                $("#pic").val("");
                $("#pic").next().removeAttr("src").attr("src", "../pages/images/add.png");
                $("#profession").val("");
                $("#expertise").val("");
                $("#content").val("");
                $("#id").val("");
            }

            $('#my-prompt').modal({
                relatedTarget: this,
                closeOnConfirm: false,
                onConfirm: function (e) {
                    if ($(id).parent().attr("data-id") == null) {
                        if (($("#name").val() == "") || ($("#profession").val() == "") || ($("#expertise").val() == "") || ($("#content").val() == "") || ($("#pic").val() == "")) {
                            alert("请补充完整信息 ！！");
                            return;
                        }
                    } else {
                        if (($("#name").val() == "") || ($("#profession").val() == "") || ($("#expertise").val() == "") || ($("#content").val() == "")) {
                            alert("请补充完整信息 ！！");
                            return;
                        }
                    }

                    if ($(id).parent().attr("data-id") != null || $(id).parent().attr("data-id") != undefined) {
                        var ReqData = "";
                        var ReqUrl = "";
                        if ($("#pic").val() == "") {
                            ReqUrl = '../view/admin/updateMemberWitdOutImage.action';
                        } else {
                            ReqUrl = '../view/admin/updateMember.action';
                        }
                        console.info("===================")
                        console.info(ReqData);
                        $("#teamIntroduction").ajaxSubmit({
                            type: 'post',
                            url: ReqUrl,
                            //url: 'team.json',
                            data: "",
                            success: function (data) {
                                $('#my-prompt').modal('close');
                                console.log(data);
                                alert("上传成功!");
                                //window.location.reload();
                                getMember();
                            },
                            error: function (XmlHttpRequest, textStatus, errorThrown) {
                                console.log(XmlHttpRequest);
                                console.log(textStatus);
                                console.log(errorThrown);
                                //alert("上传失败！")
                            }
                        });
                    } else {
                        $("#teamIntroduction").ajaxSubmit({
                            type: 'post',
                            url: '../view/admin/addMember.action',
                            //url: 'team.json',
                            data: "",
                            success: function (data) {
                                console.log(data);
                                $('#my-prompt').modal('close');
                                alert("上传成功!");
                                //window.location.reload();
                                getMember();
                            },
                            error: function (XmlHttpRequest, textStatus, errorThrown) {
                                console.log(XmlHttpRequest);
                                console.log(textStatus);
                                console.log(errorThrown);
                                alert("上传失败！");
                            }
                        });
                    }
                },
                closeViaDimmer: false,
                onCancel: function (e) {

                }
            });
        });

        //删除样式和提交
        var that;
        $("body").on("click", ".delete", function () {
            that = this;
            console.info($(that).parent().attr("data-id"));
            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function (e) {
                    console.log(that);
                    console.log($(that).parent().parent());
                    /*$(that).parent().parent().remove();*/
                    $.ajax({
                        type: 'get',
                        url: '../view/admin/deleteMember.action?id=' + $(that).parent().attr("data-id"),
                        data: "",
                        dataType: "JSON",
                        success: function (result) {
                            $(that).parent().parent().remove();
                            //window.location.reload();
                            getMember();
                        }
                    })

                },
                // closeOnConfirm: false,
                onCancel: function () {
                }
            });
        });
    });


    //修改资料上传图片弹窗
    function loadPic() {
        $("#pic").click();
        $("#pic").change(function () {
            if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test($("#pic").val()) && $("#pic").val() != "") {
                alert("图片类型必须是.gif,jpeg,jpg,png中的一种!");
                $("#pic").val("");
                return false;
            }
            if (this.files[0].size > 1 * 1024 * 1024) {
                alert("图片不能大于1M");
                $("#pic").val("");
                return false;
            } else {
                $(".newPic").attr("src", getObjectURL(this.files[0]));
                /* $("#oldPic").attr("src", getObjectURL(this.files[0]));*/
                getObjectURL(file);
            }
        });
    }


    //ajax封装
    function ajax(url, data, success, error, type_) {
        if (type_ == "") type_ = 'post';
        $.ajax({
            type: type_,
            data: data,
            url: url,
            dataType: 'json',
            contentType: "application/json",
            success: function (d) {
                success(d);
            },
            error: function (e) {
                error(e);
            }
        });
    }
</script>
</body>
</html>
